<template>
  <div class="tab-container" >
    <div style="display:flex">
      <el-input class="input" v-model="value" prefix-icon="el-icon-search" placeholder="请输入机构名称" style="width: 244px;" @input='inputChangeSearch' />
      <!-- style="" -->
      <el-button style="height:30px;line-height:0px;margin-left: 10px;padding-left: 23px;padding-right: 23px;margin-left:13px" class="button" type="primary"   @click="submitInputChange">搜索</el-button>
    </div>
    <!--<el-button type="primary" style="float:right;margin-left: 10px;">添加教师信息</el-button>-->
    <el-dropdown style="float:right;margin-left: 10px; color: #0a76a4" trigger="click" @command='exclExportChange'>
      <span class="el-dropdown-link" style="color:#409EFF;cursor: pointer;">
        <i class="el-icon-download"></i> 导出<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item icon="el-icon-plus" command="a">导出此页</el-dropdown-item>
        <el-dropdown-item icon="el-icon-plus" command="b">导出全部</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-tabs v-model="activeName" style="margin-top:15px;" @tab-click="handleClick">
      <el-tab-pane  v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive>
          <tab-pane ref="check" v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" :checkList="checkListData" :activeName="activeName" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
     <el-pagination
     background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import TabPane from './components/TabPane'
  import * as api from "@/api/reportList/reportList"
  import export_table_to_excel from '@/vendor/Export2Excel'
  
  export default {
    components: { TabPane },
    data() {
      return {
        // 机构入驻列表
        checkListData:[],
        tabMapOptions: [
          { label: '待审批', key: 'D' },
          { label: '未通过', key: 'W' },
          { label: '已通过', key: 'Y' }
        ],
        activeName: 'D',
        createdTimes: 0,
        // / 搜所的内容
        value:'',
        typeData:'0',
           // 分页加载
        loading: false,
        pageSizes: [10, 50, 100, 200, 500],
        total: 0,
        pagesize:10,
        currentPage:1,
        // 条数变化
        val:''
      }
    },

    watch: {
      activeName(val) {
        this.$router.push(`${this.$route.path}?tab=${val}`)
        console.log('监听父组件的tab',val)
      },
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          // 后续带修改
          // if(val.query.status==1){
          //   // 确定通过的话，显示已通过导航栏
          //   this.activeName='Y'
          // }else if(val.query.status==2){
          //   // 拒绝的胡，显示未通过导航栏
          //   this.activeName='W'
          // }else {
          //   this.activeName='D'
          // }
        }
      }
    },
    created() {
      const tab = this.$route.query.tab
      console.log('父组件里的tab',this.$route)
      if (tab) {
        this.activeName = tab
      }
      if(this.$route.params.tabbar){
        this.activeName=this.$route.params.tabbar
      }
        // 获取入驻机构列表数据
      this.getCheckListData()
    },
    methods: {
        // 条数变化
      handleSizeChange(val) {
        this.val=val
        this.currentPage = 1;
        this.pagesize = val
        this.getCheckListData()
      },
      // 换页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getCheckListData()
      },
       // 获取机构入驻列表数据
      getCheckListData() {
        if(this.activeName=='D'){
          this.typeData=0
        }else if(this.activeName=='W'){
          this.typeData=2
        }else {
          this.typeData=1
        }
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('/sys/firm/firmList?result='+this.typeData+'&limit='+this.pagesize+'&page='+this.currentPage
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          if(res.data.code==0){
            this.checkListData=res.data.page.list
            this.total=res.data.page.totalCount
          }
        })
      },
       // 搜索事件
      inputChangeSearch(e){
        this.value=e
        console.log('搜搜',this.value)
      },
       // 搜索提交事件
      submitInputChange(){
        console.log('获取点击的', this.$refs.check)
        let result=0
        if(this.activeName=='D'){
          result=0
        }else if(this.activeName=='W'){
          result=2
        }else {
          result=1
        }
        // 先清空子组件列表数据在请求
        this.checkListData=[]
        this.$nextTick(() => {
          var _this = this;
          this.$http({
            url: this.$http.adornUrl('/info/searchKey?key='+this.value+'&type=0&page='+this.currentPage+'&limit='+this.pagesize+'&result='+result
            ),
            method: 'post',
            data:{}
          }).then(res=>{
            console.log('获取机构入驻搜索得到的结果',res.data.page.list)
            _this.checkListData=res.data.page.list
          })
        });
      },
      handleClick(tab){
        console.log('获取点击的获取点击的获取点击的获取点击的',tab)
        this.activeName=tab.name
        this.checkListData=[]
        this.getCheckListData()
      },
      // 导出此页
      exclExportChange(event){
        if(event=='a'){
          // 点击的是导出此页
          // 导出机构入驻审批列表
          export_table_to_excel('#exportTab','机构入住审批')
        }else {
          if(this.val==500){
            export_table_to_excel('#exportTab','机构入住审批')
          }else {
            this.$message.error('请先将页数调制每页500条后,再导出')
          }
        }
      },
      showCreatedTimes() {
        this.createdTimes = this.createdTimes + 1
      }
    }
  }
</script>

<style scoped lang="scss">
  .tab-container {
    /* margin: 30px; */
    // 处理导航栏的下边线
    /deep/.el-tabs__nav-wrap{
      width: 100%;
    }
  }

  // 设置搜索框高度未30
  .input{
    /deep/.el-input__inner{
      height: 30px;
    }
     /deep/.el-input__icon{
      line-height: 30px;
    }
  }
  .button{
    /deep/.el-button{
      border: 1px solid red;
    }

  }

</style>
